<template>
  <div class="page" id="workPage">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title"  >
              <p>添加{{type===0?"日报":(type===1?"周报":"月报")}}</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <div class="container" id="RecordAdd">
              <div class="prompt">实时保存，保存时间{{time}}</div>
              <form @submit.prevent="submitLog" id="test">
                <template v-if="type===0">
                  <div class="contentWrapper" >
                    <div class="done">
                      <div>今日完成工作</div>
                      <van-field
                        v-model="todayDone"
                        rows="1"
                        autosize
                        type="textarea"
                        ></van-field>
                    </div>
                    <div class="undone">
                      <div>今日未完成工作</div>
                      <van-field
                        v-model="todayUnDone"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="coordination">
                      <div>需协调工作</div>
                      <van-field
                        v-model="todayCooperation"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                  </div>
                  <div class="fileWrapper">
                    <div class="imgWrapper" >
                      <div class="imgBtn">
                        <span>图片</span>
                        <div class="icon iconfont icon-tupian2"></div>
                      </div>
                    </div>
                    <div class="annexWrapper">
                      <div class="annexBtn">
                        <span>附件</span>
                        <div class="icon iconfont icon-xingzhuang"></div>
                      </div>
                    </div>
                  </div>
                  <div class="logReceiver" >
                    <div class="addReceiverBtn">
                      <span>日志接收人</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="sendPrompt" >
                    <div>
                      <div class="icon iconfont"></div>
                      <span>日志转聊天 不勾选时，日志通过工作通知发送给对方</span>
                    </div>
                  </div>
                  <div class="sendGroup" >
                    <div class="sendGroupBtn">
                      <span>发送到群聊</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="shareSet">
                    <div class="weui-cells weui-cells_after-title">
                      <div class="weui-cell weui-cell_switch">
                        <van-switch-cell v-model="canBeShare" title="仅接受人可见，不可转发" />
                      </div>
                    </div>
                  </div>
                  <div class="sendGroupPrompt">
                    <span>除了你自己，任何人不可转发你的日志内容</span>
                  </div>
                </template>
                <template v-else-if="type===1">
                  <div class="contentWrapper">
                    <div class="done">
                      <span>本周完成工作</span>
                      <van-field
                        v-model="weekDone"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="plan">
                      <span>下周工作计划</span>
                      <van-field
                        v-model="weekPlan"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="summary">
                      <span>本周工作总结</span>
                      <van-field
                        v-model="weekSummary"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="coordination">
                      <span>需帮助与支持</span>
                      <van-field
                        v-model="weekCooperation"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                  </div>
                  <div class="fileWrapper">
                    <div class="imgWrapper">
                      <div class="imgBtn">
                        <span>图片</span>
                        <div class="icon iconfont icon-tupian2"></div>
                      </div>
                    </div>
                    <div class="annexWrapper" >
                      <div class="annexBtn">
                        <span>附件</span>
                        <div class="icon iconfont icon-xingzhuang"></div>
                      </div>
                    </div>
                  </div>
                  <div class="logReceiver">
                    <div class="addReceiverBtn" >
                      <span>日志接收人</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="sendPrompt">
                    <div>
                      <div class="icon iconfont"></div>
                      <span>日志转聊天 不勾选时，日志通过工作通知发送给对方</span>
                    </div>
                  </div>
                  <div class="sendGroup">
                    <div class="sendGroupBtn">
                      <span>发送到群聊</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="shareSet">
                    <div class="weui-cells weui-cells_after-title">
                      <div class="weui-cell weui-cell_switch">
                        <van-switch-cell v-model="canBeShare" title="仅接受人可见，不可转发" />
                      </div>
                    </div>
                  </div>
                  <div class="sendGroupPrompt">
                    <span>除了你自己，任何人不可转发你的日志内容</span>
                  </div>
                </template>
                <template v-else>
                  <div class="contentWrapper">
                    <div class="done">
            <span
              style="">本月完成工作</span>
                      <van-field
                        v-model="monthDone"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="plan">
                      <span>下月工作计划</span>
                      <van-field
                        v-model="monthPlan"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="summary">
                      <span>本月工作总结</span>
                      <van-field
                        v-model="monthSummary"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                    <div class="coordination">
                      <span>需帮助与支持</span>
                      <van-field
                        v-model="monthCooperation"
                        rows="1"
                        autosize
                        type="textarea"
                      ></van-field>
                    </div>
                  </div>
                  <div class="fileWrapper">
                    <div class="imgWrapper">
                      <div class="imgBtn">
                        <span>图片</span>
                        <div class="icon iconfont icon-tupian2"></div>
                      </div>
                    </div>
                    <div class="annexWrapper">
                      <div class="annexBtn">
                        <span>附件</span>
                        <div class="icon iconfont icon-xingzhuang"></div>
                      </div>
                    </div>
                  </div>
                  <div class="logReceiver">
                    <div class="addReceiverBtn">
                      <span>日志接收人</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="sendPrompt" >
                    <div>
                      <div class="icon iconfont"></div>
                      <span>日志转聊天 不勾选时，日志通过工作通知发送给对方</span>
                    </div>
                  </div>
                  <div class="sendGroup" >
                    <div class="sendGroupBtn">
                      <span>发送到群聊</span>
                      <div class="icon iconfont icon-add"></div>
                    </div>
                  </div>
                  <div class="shareSet">
                    <div class="weui-cells weui-cells_after-title">
                      <div class="weui-cell weui-cell_switch">
                        <van-switch-cell v-model="canBeShare" title="仅接受人可见，不可转发" />
                      </div>
                    </div>
                  </div>
                  <div class="sendGroupPrompt">
                    <span>除了你自己，任何人不可转发你的日志内容</span>
                  </div>
                </template>
                <div class="btnWrapper">
                  <button class="submit-btn" form-type="submit">提交</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import util from '@/assets/util/util'
    export default {
        name: "RecordAdd"
      ,data(){
          return{
            type:null
            ,time:null
            ,todayDone:null
            ,todayUnDone:null
            ,todayCooperation:null
            ,weekDone:null
            ,weekPlan:null
            ,weekCooperation:null
            ,weekSummary:null
            ,monthDone:null
            ,monthPlan:null
            ,monthCooperation:null
            ,monthSummary:null
            ,canBeShare:false
          }
      }
      ,methods:{
        goBack(){
          this.$router.go(-1)
        }
        ,submitLog(){

        }
      }
      ,mounted() {
          this.type=parseInt(this.$route.query.type);
         this.time=util.getCurrTime().HMin;
      }
    }
</script>

<style scoped>
  .weui-tab__panel_bd{
    height: calc(100vh - 45px);
    overflow: scroll;
  }
  .container{
    min-height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.03);
    padding-bottom: 75px;
  }
  .prompt{
    width: 100%;
    padding: 8px;
    text-align: right;
    box-sizing: border-box;
    font-size: 14px;
    color: gray;
  }
  .btnWrapper{
    width: 100%;
    height: 70px;
    border-top:1px solid #ddd;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    padding: 12.5px;
    box-sizing: border-box;
  }
  .btnWrapper .submit-btn{
    position: absolute;
    width: 95%;
    background-color: #1E9FFF;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
  }
  .contentWrapper{
    width: 100%;
    background-color: #fff;
    padding: 0 12.5px;
    box-sizing: border-box;
  }
  .contentWrapper .done, .contentWrapper .plan, .contentWrapper .summary,.contentWrapper .undone, .contentWrapper .coordination{
    border-bottom: 1px solid #ddd;
    padding: 12.5px 0 0 0;
  }
  .fileWrapper{
    margin-top: 12.5px;
    background-color: #fff;
    padding: 0 12.5px;
  }
  .fileWrapper .imgWrapper,.fileWrapper .annexWrapper, .logReceiver .addReceiverBtn, .sendGroup .sendGroupBtn{
    padding: 10px 0;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
  }
  .fileWrapper .annexWrapper,.logReceiver .addReceiverBtn, .sendGroup .sendGroupBtn{
    border: none;
  }
  .imgBtn span,.annexBtn span,.addReceiverBtn span,.sendGroupBtn span{
    font-size: 19px;
  }
  .imgBtn .icon, .annexBtn .icon, .sendGroupBtn .icon{
    display: inline-block;
    color: #1E9FFF;
    font-size: 26px;
    float: right;
  }
  .annexBtn .icon{
    font-size: 22.5px;
  }
  .logReceiver, .sendGroup{
    background-color: #fff;
    margin-top: 12.5px;
    padding: 0 12.5px;
  }
  .sendPrompt,.sendGroupPrompt{
    width: 100%;
    padding: 7.5px 7.5px;
    box-sizing: border-box;
    font-size: 14px;
    color: gray;
    text-align: left;
  }
  .sendPrompt .icon{
    display: inline-block;
    font-size: 17px;
  }
  .sendPrompt .icon-checked{
    color: #1E9FFF;
  }
  .shareSet{
    margin-top: 12.5px;
  }
  .shareSet .weui-cells::before,.weui-cells::after{
    content: unset;
  }
  .click,.logReceiver.click,.sendGroup.click{
    background-color: #efefef;
  }
  .addReceiverBtn .icon{
    display: inline-block;
    color: #1E9FFF;
    font-size: 26px;
    float: right;
  }
  .van-switch__node{
    z-index: 0;
  }

</style>

